import React, { Component } from 'react'
import axios from 'axios'

export default class Cinema extends Component {

  constructor(){
    super();
    // 请求数据
    // axios.get("https://m.maizuo.com/gateway?cityId=310100&ticketFlag=1&k=8458082").then(res =>{
    //   console.log(res);
    // }).catch(err => {
    //   console.log(err);
    // })

    this.state = {
      cinemaList : [],
      bakCinemaList : []

    }

    axios({
      url:"https://m.maizuo.com/gateway?cityId=310100&ticketFlag=1&k=8458082",
      method:"get",
      headers:{
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"16557297171722604008243201"}',
        'X-Host': 'mall.film-ticket.cinema.list'
      }
    }).then(res => {
      console.log(res);
      console.log(res.data.data.cinemas);
      this.setState({
        cinemaList: res.data.data.cinemas,
        bakCinemaList: res.data.data.cinemas
      })
    })
  }

  render() {
    return (
      <div>
        <input onInput= {this.handleInput}/>
          {
            this.state.cinemaList.map(item=>
              <dl key={item.cinemaId}>
                <dt>{item.name}</dt>
                <dd>{item.address}</dd>
              </dl>
            ) 
          }
      </div>
    )
  }

  handleInput = (event) => {
    console.log("input", event.target.value);
    var newlist = this.state.bakCinemaList.filter(item => item.name.toUpperCase().includes(event.target.value.toUpperCase()) || item.address.toUpperCase().includes(event.target.value.toUpperCase()) );
    this.setState({
      cinemaList : newlist
    })
    // cinemaList 每次都会被重新覆盖

  }
}


/*
  filter 
*/
var arr = ["aaa", "abc", "bcc"];
var newArr = arr.filter(item => item.includes("a"));

